<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
  <!-- wrapper -->
  <div class="module-common-wrapped">
    <div class="module-common-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="公告管理" name="first">
          <div class="pane-content">
            <div class="pane-top">
              <div class="module-common-header">
                <div class="search-wrapped">
                  <el-select v-model="department" placeholder="根据发布部门筛选消息" @change="goSelectByDepartment" clearable>
                    <el-option v-for="item in departmentData" :key="item" :label="item"
                      :value="item" />
                  </el-select>
                  <el-radio-group v-model="radio2" class="ml-4" @change="getMessageByLevel">
                    <el-radio label="一般">一般</el-radio>
                    <el-radio label="重要">重要</el-radio>
                    <el-radio label="必要">必要</el-radio>
                  </el-radio-group>
                </div>
                <div class="button-wrapped">
                  <el-button type="primary" plain @click="showAll">全部公告</el-button>
                  <el-button type="primary" @click="goPublish">发布公告</el-button>
                </div>
              </div>
              <!-- 表格部分 -->
              <div class="module-common-table">
                <el-table :data="companyTableData" border style="width: 100%">
                  <el-table-column type="index" width="50" :index="companyIndexMethod"></el-table-column>
                  <el-table-column prop="message_title" label="公告主题" width="250" />
                  <el-table-column prop="message_category" label="类别" width="120" />
                  <el-table-column prop="message_publish_department" label="发布部门" width="120" />
                  <el-table-column prop="message_publish_name" label="发布人" width="130" />
                  <el-table-column prop="message_receipt_object" label="接收对象" width="120" />
                  <el-table-column prop="message_level" label="公告等级" width="120" />
                  <el-table-column prop="message_publish_time" label="发布时间" width="200">
                    <template #default="{ row }">
                      <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="message_update_time" label="最新编辑时间" width="200">
                    <template #default="{ row }">
                      <div>{{ row.message_update_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="message_click_number" label="阅读人数" width="120" />
                  <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                      <div>
                        <el-button type="success" @click="goEdit(row)">编辑</el-button>
                        <el-button type="danger" @click="goDeleteFirst(row.id, row.message_title)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="table-footer">
              <el-pagination size="small" background :total="paginationData.companyTotal"
                :page-size="paginationData.companyPageSize" :current-page="paginationData.companyCurrentPage"
                layout="prev, pager, next" @current-change="goChangePage" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="系统消息" name="second">
          <div class="pane-content">
            <div class="pane-top">
              <div class="module-common-header">
                <div class="search-wrapped">
                </div>
                <div class="button-wrapped">
                  <el-button type="primary" @click="goPublishSystem">发布系统消息</el-button>
                </div>
              </div>
              <!-- 表格部分 -->
              <div class="module-common-table">
                <el-table :data="systemTableData" border style="width: 100%">
                  <el-table-column type="index" width="50" :index="systemIndexMethod"></el-table-column>
                  <el-table-column prop="message_title" label="消息主题" />
                  <el-table-column prop="message_publish_name" label="发布者" />
                  <el-table-column prop="message_click_number" label="阅读人数" />
                  <el-table-column prop="message_publish_time" label="发布时间" width="200">
                    <template #default="{ row }">
                      <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>


                  <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                      <div>
                        <el-button type="success" @click="goEditSystem(row)">编辑</el-button>
                        <el-button type="danger" @click="goDeleteSystem(row.id, row.message_title)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="table-footer">
              <el-pagination :page-size="paginationData.systemPageSize" :current-page="paginationData.systemCurrentPage"
                background size="small" :total="paginationData.systemTotal" layout="prev, pager, next"
                @current-change="goChangeSystemPage" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <create_message ref="createMessageRef" :getCompanyMessageByPager="getCompanyMessageByPager"
    :Messagetitle="Messagetitle" :getSystemMessageByPager="getSystemMessageByPager"></create_message>
  <delete_message ref="deleteMessageRef" :getCompanyMessageByPager="getCompanyMessageByPager"
    :getSystemMessageByPager="getSystemMessageByPager" :deleteTitle="deleteTitle" :deleteTips="deleteTips">
  </delete_message>
</template>

<script lang='ts' setup>
import { ref, reactive, Ref } from 'vue'
import breadCrumb from '../../../components/breadCrumb.vue'
import { TabsPaneContext } from 'element-plus'
import { getCompanyMessageByPagerAPI, getSystemMessageByPagerAPI, getCompanyMessageTotalAPI, getSystemMessageTotalAPI, getMessageByDepartmentAPI, getMessageCountByDepartmentAPI, getMessageByLevelAPI, getMessageCountByLevelAPI } from '../../../api/message'
import create_message from '../components/create_message.vue'
import delete_message from '../components/delete_message.vue'
import { getCompanyDepartment } from '../../../api/setting'


// 面包屑
const breadcrumb = ref()
// 面包屑参数
const item = ref({
  first: '消息管理',
  second: '消息列表'
})

const deleteTitle = ref('')
const deleteTips = ref('')

const Messagetitle = ref('')

// 部门数据
const department = ref()
const departmentData: Ref<{ department: string }[]> = ref([])
const returnDepartment = async () => {
  const res = await getCompanyDepartment()
  departmentData.value = Array.from(JSON.parse(res.data.data))
}
returnDepartment()

// 分页数据
const paginationData = reactive({
  companyTotal: 1,
  companyCurrentPage: 1,
  companyPageSize: 5,
  systemTotal: 1,
  systemPageSize: 5,
  systemCurrentPage: 1,
})

// 根据部门筛选出来的消息列表 的 分页 flag
const ByDepartmentFlag = ref(false)
const ByLevelFlag = ref(false)

// 根据消息等级进行筛选
const radio2 = ref()

const activeName = ref('first')

const companyTableData: Ref<{ message_publish_department: string }[]> = ref([])
const systemTableData = ref([])

const handleClick = (tab: TabsPaneContext) => {
  if (tab.props.label == '公告管理') {
    item.value.second = '公告管理'
    getCompanyMessageByPager()
  }
  if (tab.props.label == '系统消息') {
    item.value.second = '系统消息'
    getSystemMessageByPager()
  }
}

// 获取公告管理列表 分页
const getCompanyMessageByPager = async () => {
  paginationData.companyCurrentPage = 1
  const res = await getCompanyMessageByPagerAPI({ pager: 1 })
  companyTableData.value = res.data.data
}
getCompanyMessageByPager()

// 获取公司公告总数 
const getCompanyMessageTotal = async () => {
  const res = await getCompanyMessageTotalAPI()
  paginationData.companyTotal = res.data.data
}
getCompanyMessageTotal()

// 获取系统消息总数 
const getSystemMessageTotal = async () => {
  const res = await getSystemMessageTotalAPI()
  paginationData.systemTotal = res.data.data
}
getSystemMessageTotal()


// 获取系统消息列表 分页
const getSystemMessageByPager = async () => {
  paginationData.systemCurrentPage = 1
  const res = await getSystemMessageByPagerAPI({ pager: 1 })
  systemTableData.value = res.data.data
}


// 公司公告换页
const goChangePage = async (pager) => {
  paginationData.companyCurrentPage = pager
  if (ByDepartmentFlag.value == true) {
    const res = await getMessageByDepartmentAPI({ message_publish_department: department.value, pager: paginationData.companyCurrentPage })
    companyTableData.value = res.data.data
  } else if (ByLevelFlag.value == true) {
    const res = await getMessageByLevelAPI({ message_level: radio2.value, pager: paginationData.companyCurrentPage })
    companyTableData.value = res.data.data
  } else {
    const res = await getCompanyMessageByPagerAPI({ pager: paginationData.companyCurrentPage })
    companyTableData.value = res.data.data
  }

}

// 系统消息换页
const goChangeSystemPage = async (pager) => {
  paginationData.systemCurrentPage = pager
  const res = await getSystemMessageByPagerAPI({ pager: paginationData.systemCurrentPage })
  systemTableData.value = res.data.data
  
}

// 表的索引
const companyIndexMethod = (index) => {
  return index + (paginationData.companyCurrentPage - 1) * 5 + 1
}
// 表的索引
const systemIndexMethod = (index) => {
  return index + (paginationData.systemCurrentPage - 1) * 5 + 1
}

// 发布公告
const createMessageRef = ref()
const goPublish = () => {
  Messagetitle.value = '发布公司公告'
  createMessageRef.value.open()
}

// 编辑公告
const goEdit = (row) => {
  Messagetitle.value = '编辑公司公告'
  createMessageRef.value.open(row)
}

// 删除公告
const deleteMessageRef = ref()
const goDeleteFirst = (id, msgTitle) => {
  deleteTitle.value = '删除公司公告'
  deleteTips.value = '您确定删除这条公司公告吗？删除后可在回收站查看'
  deleteMessageRef.value.open(id, msgTitle)
}

// 发布系统消息
const goPublishSystem = () => {
  Messagetitle.value = '发布系统消息'
  createMessageRef.value.open()
}

// 编辑系统消息
const goEditSystem = (row) => {
  Messagetitle.value = '编辑系统消息'
  createMessageRef.value.open(row)
}

// 删除系统消息
const goDeleteSystem = (id, msgTitle) => {
  deleteTitle.value = '删除系统消息'
  deleteTips.value = '您确定删除这条系统消息吗？删除后可在回收站查看'
  deleteMessageRef.value.open(id, msgTitle)
}

// 根据发布部门筛选消息总数
const getMessageCountByDepartment = async () => {
  const res = await getMessageCountByDepartmentAPI({ message_publish_department: department.value })
  paginationData.companyTotal = res.data.data
}

// 根据部门筛选消息
const goSelectByDepartment = async (department) => {
  if (department) {
    ByDepartmentFlag.value = true
    const res = await getMessageByDepartmentAPI({ message_publish_department: department, pager: 1 })
    companyTableData.value = res.data.data
    paginationData.companyCurrentPage = 1
    radio2.value = null
    getMessageCountByDepartment()
  } else {
    getCompanyMessageByPager()
    getCompanyMessageTotal()
  }
}

// 根据发布部门筛选消息总数
const getMessageCountByLevel = async () => {
  const res = await getMessageCountByLevelAPI({ message_level: radio2.value })
  paginationData.companyTotal = res.data.data
}

// 根据部门筛选消息
const getMessageByLevel = async (radio2) => {
  ByLevelFlag.value = true
  const res = await getMessageByLevelAPI({ message_level: radio2, pager: 1 })
  companyTableData.value = res.data.data
  paginationData.companyCurrentPage = 1
  department.value = null
  getMessageCountByLevel()
}

// 显示全部公告
const showAll = () => {
  radio2.value = null
  department.value = null
  getCompanyMessageByPager()
  getCompanyMessageTotal()
}


</script>

<style lang="scss" scoped>
.el-radio-group {
  margin-left: 20px;
}

:deep(.el-table .cell) {
  font-weight: 400;
}

// 用户管理
.table-wrapped {
  padding: 8px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .table-top {

    .table-header {
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 48px;
      background: #fff;


      .left-wrapped {
        display: flex;

        .search-wrapped {
          margin-right: 24px;
        }
      }

      .el-input__wrapper {
        height: 32px;
        padding: 0 11px;
      }
    }

    .table-content {
      min-height: 10px;
      padding: 10px 20px 20px;
      background: #fff;
    }
  }


  .table-footer {
    display: flex;
    justify-content: flex-start;
  }
}

// 公共模块样式外壳
.module-common-wrapped {
  padding: 8px;
  background: #f5f5f5;

  // 公共模块样式内容
  .module-common-content {
    padding: 0 10px;
    height: 100%;
    background: #fff;

    // 分页内容
    .pane-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #fff;

      .pane-top {
        .module-common-header {
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .search-wrapped {
            display: flex;
          }

        }

        .module-common-table {
          min-height: 10px;
          padding: 10px 20px 20px;
          margin-bottom: 8px;
          background: #fff;
        }
      }

      // 底部分页
      .table-footer {
        display: flex;
        justify-content: flex-start;
        background: #fff;
        margin-bottom: 20px;
      }

    }
  }

}

.el-radio-group {
  display: flex;
  flex-wrap: nowrap;
}

:deep(.el-select__wrapper) {
  width: 240px;
}
</style>